<script setup lang="ts">
import { defineProps, defineEmits, computed } from 'vue'
let props = defineProps(['itemList', 'status','detail_url','collect_url','cancel_collect_url'])
let emits = defineEmits(['onLower'])
const onLower = () => {
  emits('onLower')
}
</script>

<template>
  <scroll-view scroll-y="true"  class="scroll-Y" @scrolltolower="onLower">
    <view class="grid">
      <ItemAsCard
        :key="item.id"
        class="item"
        v-for="item in itemList"
        :image="item.image"
        textWidth="100"
        :is-collect="item.is_collected"
        :item="item"
        :detail_url="detail_url"
        :collect_url="collect_url"
        :cancel_collect_url="cancel_collect_url"
      ></ItemAsCard>
    </view>
    <view class="load-more-container">
      <u-loadmore :status="props.status" fontSize="16" />
    </view>
  </scroll-view>
</template>

<style scoped lang="scss">
.scroll-Y {
  width: 100%;
  height: calc(100vh - 360rpx);//278+74
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 每行两个元素 */
    gap: 20rpx;
    padding: 20rpx;
  }
}
</style>
